<!-- -->
<template>
  <div class="userasidebar">
    <el-menu
      router
      :default-active="$route.path"
      text-color="#112441"
      active-text-color="#973444"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item :index="item.path" v-for="item in asideMenu" :key="item.path">
        <i :class="'el-icon-'+item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>
      <!-- 系统日志还没加进去 -->
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "UserAsideBar",
  data() {
    return {
      asideMenu: [
        {
          path: "/myorder",
          name: "MyOrder",
          icon: "s-order",
          label: "我的订单"
        },
        {
          path: "/information",
          name: "Information",
          icon: "s-custom",
          label: "我的信息"
        },
        {
          path: "/address",
          name: "Address",
          icon: "s-home",
          label: "我的地址"
        },
        {
          path: "/discount",
          name: "Discount",
          icon: "s-ticket",
          label: "我的优惠"
        },
        {
          path: "/buyservice",
          name: "BuyService",
          icon: "s-cooperation",
          label: "售后服务"
        }
      ]
    };
  },

  components: {},

  filters: {},

  computed: {},

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style scoped>
.userasidebar {
  height: 100%;
  width: 100%;
}
.el-menu {
  height: 100%;
}

.el-menu .el-menu-item {
  margin-left: -6px;
}
</style>